<template>
  <div class="chart-panel">
    <div class="panel-header">
      <div class="panel-title">数据源状态监控</div>
      <div class="panel-actions">
        <el-button size="small">全部设备</el-button>
        <el-button size="small">雷达设备</el-button>
        <el-button size="small">通信设备</el-button>
      </div>
    </div>
    <div ref="radarChart" class="chart"></div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'DataSourceMonitor',
  setup() {
    const radarChart = ref(null);
    let chartInstance = null;

    onMounted(() => {
      initChart();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      if (chartInstance) {
        chartInstance.dispose();
      }
      window.removeEventListener('resize', handleResize);
    });

    const initChart = () => {
      if (!radarChart.value) return;

      chartInstance = echarts.init(radarChart.value);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(20, 30, 60, 0.9)',
          borderColor: '#2a4a7a',
          textStyle: {
            color: '#e4e8f0'
          }
        },
        legend: {
          data: ['雷达设备', '通信设备', '传感器'],
          textStyle: {
            color: '#a0b1d0'
          },
          bottom: 10
        },
        radar: {
          indicator: [
            { name: '连接状态', max: 100 },
            { name: '数据质量', max: 100 },
            { name: '响应时间', max: 100 },
            { name: '传输速率', max: 100 },
            { name: '稳定性', max: 100 }
          ],
          shape: 'circle',
          splitNumber: 5,
          axisName: {
            color: '#8898b8',
            backgroundColor: 'transparent',
            borderRadius: 3,
            padding: [3, 5]
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(58, 74, 122, 0.5)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(15, 28, 60, 0.3)', 'rgba(15, 28, 60, 0.5)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(58, 74, 122, 0.8)'
            }
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: [92, 85, 78, 88, 90],
                name: '雷达设备',
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                  width: 2,
                  color: '#00d296'
                },
                itemStyle: {
                  color: '#00d296'
                },
                areaStyle: {
                  color: 'rgba(0, 210, 150, 0.2)'
                }
              },
              {
                value: [85, 82, 90, 76, 87],
                name: '通信设备',
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                  width: 2,
                  color: '#0096ff'
                },
                itemStyle: {
                  color: '#0096ff'
                },
                areaStyle: {
                  color: 'rgba(0, 150, 255, 0.2)'
                }
              },
              {
                value: [78, 90, 82, 85, 80],
                name: '传感器',
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                  width: 2,
                  color: '#9664ff'
                },
                itemStyle: {
                  color: '#9664ff'
                },
                areaStyle: {
                  color: 'rgba(150, 100, 255, 0.2)'
                }
              }
            ]
          }
        ]
      };

      chartInstance.setOption(option);
    };

    const handleResize = () => {
      if (chartInstance) {
        chartInstance.resize();
      }
    };

    return {
      radarChart
    };
  }
};
</script>

<style scoped>
.chart {
  height: 30vh;
}
</style>